<template>
  <div class="page-search">
    <div class="search-box">
      <el-input size="large" v-model="keyword" clearable @keyup.enter.native="getResults" placeholder="搜索物种、数据等">
        <el-button slot="append" @click="getResults" class="btn-search" type="primary">
          搜索
        </el-button>
      </el-input>
      <p v-if="total" class="search-total">
        搜索所有记录总计：{{ total }} 个结果
      </p>
    </div>

    <section class="search-panels">
      <aside class="search-filter">
        <h4>推荐部分</h4>
        <ul>
          <li>物种名称 ({{name.length}}) </li>
          <li>生态类群 ({{bio_type.length}}) </li>
          <li>网格编号 ({{grid.length}}) </li>
        </ul>
        <a>更多</a>
      </aside>
      <main class="search-results">
        <div class="search-sorter">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
          <div v-if="count > 0">
            历史记录（{{count}}）
          </div>
        </div>
        <div class="result-list" v-if="results.length">
          <router-link v-for="item in results" :key="item._id" class="result-item"  :to="{ name: 'SearchDetail', params: { id: item._id }}">
            <p>种 <a>{{item['种（中文名）']}}</a> &emsp; {{item['种（拉丁名）']}}</p>
            <p>生态类群：{{item['生态类群']}}</p>
            <p>形态特征：{{item['形态特征描述']}}</p>
            <p>记录一次目击 出现次数<a>0</a></p>

            <i class="el-icon el-icon-arrow-right" />
          </router-link>
        </div>
        <el-empty v-else description="请在上方输入关键字搜索结果"></el-empty>

        <el-pagination
          v-if="total > 0"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </main>
    </section>
  </div>
</template>

<script>
import {getSearch} from '@/api'
export default {
  name: 'PageSearch',
  data() {
    return {
      sortForm: {
        field0: 10,
      },
      // activeFilter: '',
      // filters: [
      //   { title: '物种名称', value: 'name', count: 23955908 },
      //   { title: '物种地区', value: 'area', count: 23955908 },
      //   { title: '生态类群', value: 'group', count: 23955908 },
      //   { title: '网格编号', value: 'grid', count: 23955908 },
      // ],
      keyword: '',
      bio_type: [],
      grid: [],
      name: [],
      count: 0,
      pageSize: 10,
      pageNum: 1,
    };
  },
  computed: {
    total(){
      return this.bio_type.length + this.grid.length + this.name.length
    },
    results(){
      const list = this.bio_type.concat(this.grid).concat(this.name)
      return list.slice((this.pageNum - 1) * this.pageSize, this.pageNum * this.pageSize - 1)
    }
  },
  methods: {
    getResults () {
      getSearch({
        search_key: this.keyword
      }).then(res => {
        this.bio_type = res.bio_type || []
        this.grid = res.grid || []
        this.name = res.name || []
        this.count = res.count || 0
      })
    },

    onFilterClick(item){
      this.activeFilter = item.value
      // todo: 根据activeFilter发送搜索请求
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
    }
  },
  created(){
    const { keyword } = this.$route.query
    if(keyword){
      this.keyword = keyword
      this.getResults()
    }
  },
  unmounted() {
    this.$router.replace({ query: null })
  },
};
</script>

<style lang="scss">
.page-search{
  padding: 30px;

  .search-box{
    width: 70%;
    min-width: 800px;
    .el-input-group__append{
      color: #fff;
      border-color: var(--primary-color);
      background: var(--primary-color);
      box-shadow: none;
      .el-button{
        border-radius: 0 4px 4px 0;
      }
    }
    .search-total{
      margin-top: 10px;
      font-size: 15px;
    }
  }

  .search-panels{
    display: flex;
    margin-top: 30px;
    .search-filter{
      margin-right: 30px;
      padding: 16px 0;
      width: 250px;
      border: 1px solid #ddd;
      & > h4 {
        padding: 0 16px;
        margin: 0 0 8px;
      }
      & > ul{
        list-style: none;
        & > li{
          padding: 8px 16px;
          font-size: 14px;
          cursor: pointer;
          &:hover{
            background-color: #ddd;
          }
          &.active{
            color: #fff;
            background-color: var(--primary-color);
          }
        }
      }
      & > a{
        display: block;
        padding: 8px 16px;
      }
    }
    .search-results{
      flex: 1;
      min-width: 0;

      .search-sorter{
        display: flex;
        align-items: center;
        padding: 8px 0;
        border-bottom: 1px solid #ddd;

        .el-pagination{
          flex: 1;
          min-width: 0;
        }
      }

      .result-list{
        .result-item{
          display: block;
          color: #333;
          position: relative;
          padding: 8px 40px 8px 8px;
          border-bottom: 1px solid #ddd;
          font-size: 14px;
          & > p {
            line-height: 30px;
          }
          &:hover{
            background-color: #eee;
            .el-icon{
              color: var(--primary-color);
            }
          }

          .el-icon{
            position: absolute;
            top: 50%;
            right: 10px;
            color: #777;
            font-size: 20px;
            transform: translateY(-50%);
            font-size: 20px;
          }
        }
      }

      & > .el-pagination{
        padding: 0;
        margin-top: 10px;
      }
    }
  }
}

</style>
